<!DOCTYPE HTML>
<!--
	二手电子乐园 - 产品分类页
	基于 Helios by HTML5 UP 模板改造
-->
<html>

<head>
	<title>{{ categoryTitle }} - 二手电子乐园</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
	<meta name="description" content="浏览二手电子产品分类，找到您需要的商品" />
	<link rel="stylesheet" href="assets/css/main.css" />
	<noscript>
		<link rel="stylesheet" href="assets/css/noscript.css" />
	</noscript>
	<style>
		[v-cloak] {
			display: none;
		}

		.filter-section {
			background: #f8f9fa;
			padding: 2em;
			border-radius: 8px;
			margin-bottom: 2em;
		}

		.filter-row {
			display: flex;
			gap: 2em;
			align-items: center;
			flex-wrap: wrap;
			margin-bottom: 1em;
		}

		.filter-group {
			display: flex;
			align-items: center;
			gap: 0.5em;
		}

		.filter-group label {
			font-weight: bold;
			color: #333;
			white-space: nowrap;
		}

		.filter-group select,
		.filter-group input {
			padding: 0.5em;
			border: 1px solid #ddd;
			border-radius: 4px;
		}

		.price-range {
			display: flex;
			align-items: center;
			gap: 0.5em;
		}

		.price-range input {
			width: 100px;
		}

		.filter-btn {
			background: #4acaa8;
			color: white;
			border: none;
			padding: 0.6em 1.2em;
			border-radius: 4px;
			cursor: pointer;
		}

		.filter-btn:hover {
			background: #3a9d84;
		}

		.reset-btn {
			background: #6c757d;
			color: white;
			border: none;
			padding: 0.6em 1.2em;
			border-radius: 4px;
			cursor: pointer;
		}

		.reset-btn:hover {
			background: #5a6268;
		}

		.sort-section {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 2em;
			padding: 1em;
			background: white;
			border-radius: 8px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		}

		.sort-group {
			display: flex;
			align-items: center;
			gap: 1em;
		}

		.product-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
			gap: 2em;
			margin-bottom: 2em;
		}

		.product-card {
			background: white;
			border-radius: 8px;
			overflow: hidden;
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
			transition: transform 0.3s ease;
		}

		.product-card:hover {
			transform: translateY(-5px);
		}

		.product-image {
			width: 100%;
			height: 200px;
			object-fit: cover;
		}

		.product-content {
			padding: 1.5em;
		}

		.product-title {
			font-size: 1.1em;
			font-weight: bold;
			margin-bottom: 0.5em;
			color: #333;
		}

		.product-title a {
			color: inherit;
			text-decoration: none;
		}

		.product-title a:hover {
			color: #4acaa8;
		}

		.product-price {
			font-size: 1.3em;
			color: #e74c3c;
			font-weight: bold;
			margin-bottom: 0.5em;
		}

		.product-description {
			color: #666;
			font-size: 0.9em;
			margin-bottom: 1em;
			line-height: 1.4;
		}

		.seller-info {
			font-size: 0.8em;
			color: #888;
			border-top: 1px solid #eee;
			padding-top: 0.5em;
		}

		.no-products {
			text-align: center;
			padding: 3em;
			color: #666;
		}

		.pagination {
			display: flex;
			justify-content: center;
			gap: 0.5em;
			margin-top: 2em;
		}

		.pagination button {
			padding: 0.5em 1em;
			border: 1px solid #ddd;
			background: white;
			cursor: pointer;
			border-radius: 4px;
		}

		.pagination button:hover {
			background: #f8f9fa;
		}

		.pagination button.active {
			background: #4acaa8;
			color: white;
			border-color: #4acaa8;
		}

		.pagination button:disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}
	</style>
</head>

<body class="is-preload" v-scope v-cloak>
	<div id="page-wrapper">
		<!-- Header Container -->
		<div id="header-container"></div>

		<!-- Main -->
		<div class="wrapper style1">
			<div class="container">
				<article id="main" class="special">
					<header>
						<h2>{{ categoryTitle }}</h2>
						<p>{{ categoryDescription }}</p>
					</header>

					<!-- 筛选区域 -->
					<div class="filter-section">
						<div class="filter-row">
							<div class="filter-group">
								<label>价格区间：</label>
								<div class="price-range">
									<input type="number" v-model="filters.minPrice" placeholder="最低价" />
									<span>-</span>
									<input type="number" v-model="filters.maxPrice" placeholder="最高价" />
								</div>
							</div>
							<div class="filter-group">
								<label>品牌：</label>
								<select v-model="filters.brand">
									<option value="">全部品牌</option>
									<option v-for="brand in availableBrands" :key="brand" :value="brand">{{ brand }}
									</option>
								</select>
							</div>
							<div class="filter-group">
								<label>成色：</label>
								<select v-model="filters.condition">
									<option value="">全部成色</option>
									<option value="全新">全新</option>
									<option value="九成新">九成新</option>
									<option value="八成新">八成新</option>
									<option value="七成新">七成新</option>
								</select>
							</div>
						</div>
						<div class="filter-row">
							<button class="filter-btn" @click="applyFilters">应用筛选</button>
							<button class="reset-btn" @click="resetFilters">重置筛选</button>
						</div>
					</div>

					<!-- 排序和结果统计 -->
					<div class="sort-section">
						<div>
							<span>共找到 {{ filteredProducts.length }} 件商品</span>
						</div>
						<div class="sort-group">
							<label>排序方式：</label>
							<select v-model="sortBy" @change="applySorting">
								<option value="default">默认排序</option>
								<option value="price-asc">价格从低到高</option>
								<option value="price-desc">价格从高到低</option>
								<option value="time-desc">最新发布</option>
							</select>
						</div>
					</div>

					<!-- 产品网格 -->
					<div v-if="paginatedProducts.length > 0" class="product-grid">
						<div v-for="product in paginatedProducts" :key="product.id" class="product-card">
							<img :src="product.image" :alt="product.title" class="product-image" />
							<div class="product-content">
								<div class="product-title">
									<a :href="'product-detail.html?id=' + product.id">{{ product.title }}</a>
								</div>
								<div class="product-price">¥{{ product.price }}</div>
								<div class="product-description">{{ product.description }}</div>
								<div class="seller-info">
									卖家：{{ product.seller.name }} | {{ product.seller.location }}
								</div>
							</div>
						</div>
					</div>

					<!-- 无商品提示 -->
					<div v-else class="no-products">
						<h3>暂无商品</h3>
						<p>该分类下暂时没有商品，请尝试其他分类或调整筛选条件</p>
					</div>

					<!-- 分页 -->
					<div v-if="totalPages > 1" class="pagination">
						<button @click="currentPage = 1" :disabled="currentPage === 1">
							首页
						</button>
						<button @click="currentPage--" :disabled="currentPage === 1">
							上一页
						</button>
						<button v-for="page in visiblePages" :key="page" @click="currentPage = page"
							:class="{ active: currentPage === page }">
							{{ page }}
						</button>
						<button @click="currentPage++" :disabled="currentPage === totalPages">
							下一页
						</button>
						<button @click="currentPage = totalPages" :disabled="currentPage === totalPages">
							末页
						</button>
					</div>
				</article>
			</div>
		</div>

		<!-- Footer Container -->
		<div id="footer-container"></div>
	</div>

	<!-- Scripts -->
	<script src="utils/loader.js"></script>
	<script>
		// 等待所有脚本加载完成后初始化页面
		window.addEventListener('scriptsLoaded', function () {
			// 加载公共组件
			fetchHtml.fetchAll();

			// 初始化 petite-vue
			const { createApp } = PetiteVue;

			const appData = {
				// 数据
				categoryType: '',
				categoryTitle: '',
				categoryDescription: '',
				allProducts: [],
				filteredProducts: [],
				filters: {
					minPrice: '',
					maxPrice: '',
					brand: '',
					condition: ''
				},
				sortBy: 'default',
				currentPage: 1,
				pageSize: 12,

				// 计算属性
				get availableBrands() {
					const brands = [...new Set(this.allProducts.map(p => this.extractBrand(p.title)))];
					return brands.filter(brand => brand);
				},

				get paginatedProducts() {
					const start = (this.currentPage - 1) * this.pageSize;
					const end = start + this.pageSize;
					return this.filteredProducts.slice(start, end);
				},

				get totalPages() {
					return Math.ceil(this.filteredProducts.length / this.pageSize);
				},

				get visiblePages() {
					const pages = [];
					const start = Math.max(1, this.currentPage - 2);
					const end = Math.min(this.totalPages, this.currentPage + 2);

					for (let i = start; i <= end; i++) {
						pages.push(i);
					}
					return pages;
				},



				// 方法
				loadCategory() {
					const urlParams = new URLSearchParams(window.location.search);
					this.categoryType = urlParams.get('type') || 'phone';

					const categoryMap = {
						phone: { title: '二手手机', description: '各类品牌二手手机，品质保证，价格实惠' },
						camera: { title: '二手相机', description: '专业相机设备，摄影爱好者的理想选择' },
						digital: { title: '二手数码', description: '各类数码产品，包括平板、耳机、笔记本等' },
						fridge: { title: '二手冰箱', description: '品质家电，节能环保，价格优惠' }
					};

					const category = categoryMap[this.categoryType] || categoryMap.phone;
					this.categoryTitle = category.title;
					this.categoryDescription = category.description;

					// 加载产品数据
					this.loadProducts();
				},

				loadProducts() {
					const allProducts = [
						...(window.siteData.featuredProducts || []),
						...(window.siteData.recommendedProducts || [])
					];

					// 根据分类筛选产品
					const categoryFilter = {
						phone: ['phones'],
						camera: ['cameras'],
						digital: ['digital'],
						fridge: ['refrigerators']
					};

					const allowedCategories = categoryFilter[this.categoryType] || [];
					this.allProducts = allProducts.filter(product =>
						allowedCategories.includes(product.category)
					);

					// 添加调试信息
					console.log('Category Type:', this.categoryType);
					console.log('Allowed Categories:', allowedCategories);
					console.log('All Products Count:', allProducts.length);
					console.log('Filtered Products Count:', this.allProducts.length);
					console.log('Sample Product Categories:', allProducts.slice(0, 3).map(p => p.category));

					this.applyFilters();
				},

				extractBrand(title) {
					// 简单的品牌提取逻辑
					const brands = ['iPhone', 'Apple', '小米', '华为', '三星', '佳能', '尼康', '索尼', '海尔', '美的', '西门子'];
					for (const brand of brands) {
						if (title.includes(brand)) {
							return brand;
						}
					}
					return '';
				},

				applyFilters() {
					let filtered = [...this.allProducts];

					// 价格筛选
					if (this.filters.minPrice) {
						filtered = filtered.filter(p => parseFloat(p.price) >= parseFloat(this.filters.minPrice));
					}
					if (this.filters.maxPrice) {
						filtered = filtered.filter(p => parseFloat(p.price) <= parseFloat(this.filters.maxPrice));
					}

					// 品牌筛选
					if (this.filters.brand) {
						filtered = filtered.filter(p => p.title.includes(this.filters.brand));
					}

					// 成色筛选
					if (this.filters.condition) {
						filtered = filtered.filter(p => (p.condition || '九成新') === this.filters.condition);
					}

					this.filteredProducts = filtered;
					this.applySorting();
					this.currentPage = 1;
				},

				applySorting() {
					switch (this.sortBy) {
						case 'price-asc':
							this.filteredProducts.sort((a, b) => parseFloat(a.price) - parseFloat(b.price));
							break;
						case 'price-desc':
							this.filteredProducts.sort((a, b) => parseFloat(b.price) - parseFloat(a.price));
							break;
						case 'time-desc':
							this.filteredProducts.sort((a, b) => b.id - a.id);
							break;
						default:
							// 默认排序，保持原有顺序
							break;
					}
				},

				resetFilters() {
					this.filters = {
						minPrice: '',
						maxPrice: '',
						brand: '',
						condition: ''
					};
					this.sortBy = 'default';
					this.applyFilters();
				}
			};

			const app = createApp(appData);
			app.mount();

			// 调用初始化方法
			appData.loadCategory();
		});
	</script>
</body>

</html>